<template>
	<scroll-view scroll-y>
		<view class="details" v-for="(item, index) in detailItems" :key="index">
			<view class="pic">
				<image :src="item.img" mode="aspectFit" class="content-image"></image>
			</view>
			<view class="text">
				<!-- 标题 -->
				<view class="title">{{ item.name }}</view>
				<view class="fav" style="margin: 5px; display: flex; justify-content: end;">
					<uni-fav :checked="item.isFav" @click="favObj(item)"></uni-fav>
				</view>
				<!-- 条件性地显示图标和距离文本 -->
				<view v-if="item.type === '1'|| item.type === '3'" class="distance-wrapper">
					<uni-icons type="map-pin-ellipse" :size="23" color="#157efe" />
					<text class="wenzi">你到这里有{{ dis }}km</text>
				</view>
				<button type="default" @tap="goto(item)">到这里去</button>
				<!-- <view class="fav" style="margin: 5px;display: flex;justify-content: end;">
						<uni-fav :checked="hasFav" @click="favObj"></uni-fav>
					</view> -->
				<!-- 描述文本 -->
				<view class="msg">
					{{ item.intro }}
				</view>
			</view>
		</view>
	</scroll-view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		CONFIG
	} from '../../utils/config';
	import {
		userStore
	} from '../../store/userStore';
	import {
		getMapDistance
	} from "@/utils/tools.js";


	let store = userStore();
	let dis = ref()
	let detailItems = ref()
	onLoad(async (options) => {
		try {
			// 从页面跳转参数中获取 name
			let {
				name
			} = options

			// 根据 name 获取详情数据（注意：这里需要调整 URL 和查询参数格式以匹配后端 API）
			let res = await uni.request({
				url: `${CONFIG.leancloud_url}/1.1/classes/xianplayitem?where={"name":"${name}"}`,
				method: 'GET',

			})
			// 检查响应状态码和数据结构
			if (res.statusCode === 200 && Array.isArray(res.data.results) && res.data.results.length > 0) {
				// 假设后端返回的是一个数组，且数组中只有一个与 name 匹配的结果（或者您只需要第一个结果）
				detailItems.value = res.data.results // 或者根据您的需求处理结果数组
				console.log('获取详情数据成功:', detailItems.value)

				// 从结果数组中提取第一个元素的name属性，并确保它是有效的字符串
				let firstItemName = res.data.results[0].name;
				// 设置导航栏标题
				uni.setNavigationBarTitle({
					title: firstItemName,
				});
				let firstItem = res.data.results[0];
				console.log(firstItem)
				console.log(store.currentPos)
				console.log(firstItem.lat, firstItem.lon)
				dis.value = getMapDistance(store.currentPos.longitude, store.currentPos.latitude,
					firstItem.lon, firstItem.lat)
				console.log(dis.value)


			} else {
				console.error('获取详情数据失败或没有找到匹配的数据', res)
			}
		} catch (error) {
			console.error('请求发生错误', error)
		}
	})

	function goto(item) {
		uni.navigateTo({
			url: `/pages/mywebView/mywebView?latitude=${item.lat}&longitude=${item.lon}&name=${item.name}&type=2`
		})
	}
	let hasFav = ref(true)

	
	function favObj(item) {
		item.isFav = !item.isFav;
		// 这里添加发送到服务器的逻辑，更新收藏状态
		console.log(`Item ${item.name} is now ${item.isFav ? 'favorited' : 'unfavorited'}`);
	}
</script>

<style scoped>
	.detail-page {
		padding: 20px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.back-btn {
		cursor: pointer;
		font-size: 24px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
	}

	.content {
		background-color: #fff;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.image {
		width: 100%;
		height: 300px;
		margin-bottom: 20px;
	}

	.detail-image {
		width: 100%;
		height: 100%;
	}

	.description {
		font-size: 16px;
		color: #333;
	}

	.name {
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.intro {
		margin-bottom: 20px;
	}

	.distance {
		margin-bottom: 20px;
		color: #666;
	}
</style>